<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="applicable-device" content="mobile">
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<title>Insert title here</title>
<link href="${ctx}/css/style.css" rel="stylesheet" type="text/css" media="all"/>
<!--Google Fonts-->
<link href='http://fonts.useso.com/css?family=Roboto:500,900italic,900,400italic,100,700italic,300,700,500italic,100italic,300italic,400' rel='stylesheet' type='text/css'>
<link href='http://fonts.useso.com/css?family=Droid+Serif:400,700,400italic,700italic' rel='stylesheet' type='text/css'>
<!--Google Fonts-->
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
	<c:set var="ctx" value="${pageContext.request.contextPath}"/>
	<link rel="stylesheet" type="text/css" href="${ctx}/jquery-easyui-1.4.5/themes/material/easyui.css">
	<link rel="stylesheet" type="text/css" href="${ctx}/jquery-easyui-1.4.5/themes/icon.css">
	<link rel="stylesheet" type="text/css" href="${ctx}/ext/css/ext-all.css">
	<link rel="stylesheet" type="text/css" href="${ctx}/css/style.css">
	
	<script type="text/javascript" src="${ctx}/ext/js/ext-all.js"></script>
	<script type="text/javascript" src="${ctx}/jquery-easyui-1.4.5/jquery.min.js"></script>
	<script type="text/javascript" src="${ctx}/jquery-easyui-1.4.5/jquery.easyui.min.js"></script>
	<script type="text/javascript" src="${ctx}/jquery-easyui-1.4.5/locale/easyui-lang-zh_CN.js"></script>

	<script type="text/javascript" src="${ctx}/js/commom.js"></script>
	<script type="text/javascript" src="${ctx}/js/blx.js"></script>
	<script type="text/javascript" src="${ctx}/js/login.js"></script>
	<script type="text/javascript" src="${ctx}/layer/layer.js"></script>
</head>
<script>

	var code = ""; //在全局定义验证码   
	var code2 = ""; //在全局定义验证码  
	//产生验证码  
	function createCode(){
	     
	     var codeLength = 4;//验证码的长度  
	     
	     var random = new Array(0,1,2,3,4,5,6,7,8,9,'A','B','C','D','E','F','G','H','I','J','K','L','M','N','O','P','Q','R',  
	     'S','T','U','V','W','X','Y','Z','a','b','c','d','e','f','g','h','i','j','k','l','m','n','o','p','q','r','s','t','u','v','w','x','y','z');//随机数  
	     for(var i = 0; i < codeLength; i++) {//循环操作  
	        var index = Math.floor(Math.random()*62);//取得随机数的索引（0~61）  
	        code += random[index];//根据索引取得随机数加到code上  
	     }  
	} 
	
	function submitLoginForm() {
		code2 = document.getElementById("imgCode").value;
		code = code.toUpperCase();
		code2 = code2.toUpperCase();
		if (code != code2) {
			$.messager.alert("提示", "验证码有错！");
		}else{
			$('#loginForm').form('submit', {
				url : '${ctx}/manage/doLogin',
				dataType : 'json',
				success : function(result) {
					var json = $.parseJSON(result);
					if (json.success == 0) {
						window.location.href = "${ctx}/manage/index?dep="+json.rows;
					} else if (json.success == 1) {
						alert("用户名密码有错，请重新输入！");
						window.location.href = "${ctx}/index";
					} else {
						$.messager.alert("提示", json.msg);
						createCode();//刷新验证码  
						$('#input').val('');
					}
				}
			});
		}
	}
	 
	
	function clearForm() {
		$('#login').form('clear');
	}
	function goRegister() {
		window.location.href = "${ctx}/manage/goRegister";

	}

	function yanzhengma(){
		//window.open("http://qr.liantu.com/api.php?text="+code);
		//iframe层
		document.getElementById("imgCode").value = code;
		layer.open({
		  type: 2,
		  title: '用手机扫一扫验证码',
		  shadeClose: true,
		  shade: 0.8,
		  area: ['320px', '350px'],
		  content: 'http://qr.liantu.com/api.php?text='+code //iframe的url
		});
	}
	
</script>
<body onload="createCode()">
<div class="login">
	
	<div class="login-top">
		<h1>LOGIN FORM</h1>
		<form id="loginForm" method="post">
			<!-- <input type="text" value=" 用户名" onfocus="this.value = '';" onblur="if (this.value == '') {this.value = '用户名';}">
			<input type="password" value="password" onfocus="this.value = '';" onblur="if (this.value == '') {this.value = 'password';}"> -->
			
			<input type="text" placeholder="手机号码" name="telephone" id="tel">
			<input type="password" placeholder="密码" name="password">
	    
	    <div class="forgot">
	    
	    	<a href="javascript:void(0)" onclick="yanzhengma()" >&nbsp;验证码&nbsp;</a>
			<input type="text" id="imgCode" name="imgCode" data-options="required:true" ></input>
	    	<br>
	    	<label><input name="dep" type="radio" value="1" />用户 </label> 
	    	&nbsp;&nbsp;
			<label><input name="dep" type="radio" value="2" />管理员 </label> 
			&nbsp;&nbsp;
			<label><input name="dep" type="radio" value="3" />超级管理员 </label>
			&nbsp;&nbsp;
	    	<a href="javascript:void(0)" onclick="submitLoginForm()">&nbsp;登&nbsp;录&nbsp;</a>
	    	
	    </div>
	    </form>
	</div>
	<div class="login-bottom">
		<h3>添加新用户，请 &nbsp;<a href="javascript:void(0)" onclick="goRegister()">注册</a>&nbsp ！</h3>
	</div>
</div>	


<script type="text/javascript">
	var rm=document.getElementsByName("dep")
	var flag=false;
	for(var i=0;i<rm.length;i++){
		if(rm[i].checked){
			flag=false;
			break;
		}
	}
	if(!flag){
		rm[0].checked=true;
	}
</script>
</body>
</html>